<template>
  <div class="app">
      <div class="kd">
        <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="快递公司"  prop="type">
            <el-input placeholder="选填auto自动识别" v-model="ruleForm.type"></el-input>
          </el-form-item>
          <el-form-item label="快递单号"  prop="number">
            <el-input required v-model="ruleForm.number"></el-input>
          </el-form-item>
          <el-form-item label="手机号"  prop="mobile">
            <el-input placeholder="顺丰快递必填" v-model="ruleForm.mobile"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="success" :disabled="flag?false:true" @click="get">查询物流信息</el-button>
      </div>

      <el-dialog
        title="快递信息"
        :visible.sync="dialogVisible"
        width="50%"
        >
        <el-timeline :reverse="false">
            <el-timeline-item
              v-for="(item, index) in kdMsg"
              :key="index"
              :timestamp="item.time">
              {{item.status}}
            </el-timeline-item>
          </el-timeline>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary"  @click="cancel">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import $ from 'jquery'

export default {
      data(){
        return {
            dialogVisible:false,
            kdMsg:[],
            ruleForm:{
              key:'8sBBG8MCkikfkUMj9WQRs6Zgh',
              type:'',
              number:'',
              mobile:''
            },
            flag:true
        }
      },
      methods:{
          req(){
            if(this.ruleForm.type.trim().length==0)
              this.ruleForm.type = 'auto'
            $.ajax({
              type:'post',
              url:'https://binstd.apistd.com/express/query',
              data:this.ruleForm,
              dataType:'jsonp',
              success:res=>{
                  // console.log(res)
                  if(res.status == 0){
                    this.dialogVisible = true
                    this.kdMsg = res.result.list
                  }else if(this.ruleForm.number.trim().length == 0){
                    this.$message.error('快递单号不能为空!')
                  }else{
                    this.$message.error(res.msg)
                  }
              },
              error:err=>{
                  console.log(err)
              }
            })
          },
          async get(){
              if(this.flag) {
                this.req()
                this.flag = false
              }
              setTimeout(()=>{
                this.flag = true
              },1000*10)
          },
          cancel(){
            this.dialogVisible = false
            this.$refs.ruleForm.resetFields()
          }
      }
}
</script>

<style scoped>
  .app{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .kd{
    width: 50%;
    height: 400px;
    margin-top: 30px;
  }
  .el-button{
    margin: 10px 0  0 100px;
  }
</style>
